use chrono::{Local, NaiveDate};
use icondata as i;
use leptos::*;
use leptos_icons::*;
use shq_web_controls::{use_message, Popover,PopoverTrigger,Calendar,Dropdown, Scrollbar,DatePicker,TimePicker,QuarterPicker, ExpandMode, Input, InputNumber, InputPrefix, InputSuffix, MessageVariant, MonthPicker, MultiTreeSelect, Select, SelectOption, TextArea, TreeSelect, TreeSelectOption, Upload, UploadDragger, ValidType, YearPicker};
use web_sys::FileList;
#[component]
pub fn Test4() -> impl IntoView {
    let value = create_rw_signal("".to_string());
    let value2 = create_rw_signal(0);
    let value3 = create_rw_signal("".to_string());
    let value4: RwSignal<Option<u32>> = create_rw_signal(None);
    let value5: RwSignal<Option<u32>> = create_rw_signal(None);
    let value6: RwSignal<Vec<u32>> = create_rw_signal(Vec::new());
    let message = use_message();
    let custom_request = move |file_list: FileList| {
        message.create(
            format!("Number of uploaded files: {}", file_list.length()),
            MessageVariant::Success,
            Default::default(),
        );
    };
    let dval1: RwSignal<Option<NaiveDate>> = create_rw_signal(None);
    let dval2: RwSignal<Option<i32>> = create_rw_signal(None);
    let dval3: RwSignal<Option<i32>> = create_rw_signal(None);
    let dval4: RwSignal<Option<i32>> = create_rw_signal(None);
    create_effect(move |_| {
        log::debug!("dval3:{:?}", dval3.get());
    });
    let title_view=move||
        r#"<span class="text-sm">Littel, Schaden and Vandervort Littel, Schaden and Vandervort Littel, Schaden and Vandervort</span>"#;
    let is_show_menu=create_rw_signal(false);
    let ddval:RwSignal<Option<u32>> = create_rw_signal(None);
    view! {
        <div class="bg-base-100">
            // <Input value=value placeholder="测试" valid_type=ValidType::Success>
            //     <InputPrefix slot>
            //         <Icon icon=i::AiAppleFilled/>
            //     </InputPrefix>
            //     <InputSuffix slot>
            //         <Icon icon=i::AiGithubOutlined/>
            //     </InputSuffix>
            // </Input>
            <DatePicker value=dval1/>
            <YearPicker value=dval2/>
            <QuarterPicker value=dval3/>
            <MonthPicker value=dval4/>
            <TimePicker/>
            <Scrollbar>
                <p style="line-height: 1.5; white-space: nowrap; padding: 12px;">
                    r#"This being said, the world is moving in the direction opposite to Clarke's predictions. In 2001: A Space Odyssey, in the year of 2001, which has already passed, human beings have built magnificent cities in space, and established permanent colonies on the moon, and huge nuclear-powered spacecraft have sailed to Saturn. However, today, in 2018, the walk on the moon has become a distant memory.And the farthest reach of our manned space flights is just as long as the two-hour mileage of a high-speed train passing through my city. At the same time, information technology is developing at an unimaginable speed. With the entire world covered by the Internet, people have gradually lost their interest in space, as they find themselves increasingly comfortable in the space created by IT. Instead of an exploration of the real space, which is full of real difficulties, people now just prefer to experience virtual space through VR. Just like someone said, "You promised me an ocean of stars, but you actually gave me Facebook.""#
                </p>
            </Scrollbar>
            <Dropdown values=move||{if let Some(val)=ddval.get(){vec![val]}else{vec![]}}
                    options=vec![SelectOption::new("选项11", 11_u32)
                    SelectOption::new("选项12", 12_u32)
                    SelectOption::new("选项13", 13_u32)] is_show_menu
                    on_select=|_| move|val:u32|ddval.set(Some(val))>
                    <div on:click=move|_|is_show_menu.set(!is_show_menu.get())>{"下拉框"}</div>
            </Dropdown>
            // <InputNumber value=value2 step=1 placeholder="请输入数字" valid_type=ValidType::Success/>
            // <Input value=value placeholder="测试2" valid_type=ValidType::Success/>
            // <TextArea value=value3 placeholder="请输入内容" height=200 valid_type=ValidType::Success/>
            <TreeSelect value=value5 options=vec![
                TreeSelectOption::new("选项1", 1_u32,None),
                TreeSelectOption::new("选项11", 11_u32,Some(1)),
                TreeSelectOption::new("选项12", 12_u32,Some(1)),
                TreeSelectOption::new("选项13", 13_u32,Some(1)),
                TreeSelectOption::new("选项2", 2_u32,None),
                TreeSelectOption::new("选项21", 21_u32,Some(2)),
                TreeSelectOption::new("选项22", 22_u32,Some(2)),
                TreeSelectOption::new("选项23", 23_u32,Some(2)),
                TreeSelectOption::new("选项3", 3_u32,None),
                TreeSelectOption::new("选项31", 31_u32,Some(3)),
                TreeSelectOption::new("选项32", 32_u32,Some(3)),
                TreeSelectOption::new("选项33", 33_u32,Some(3)),
                TreeSelectOption::new("选项4", 4_u32,None),
                TreeSelectOption::new("选项41", 41_u32,Some(4)),
                TreeSelectOption::new("选项42", 42_u32,Some(4)),
                TreeSelectOption::new("选项43", 43_u32,Some(4)),
                TreeSelectOption::new("选项5", 5_u32,None),
                TreeSelectOption::new("选项51", 51_u32,Some(5)),
                TreeSelectOption::new("选项52", 52_u32,Some(5)),
                TreeSelectOption::new("选项53", 53_u32,Some(5)),
                TreeSelectOption::new("选项6", 6_u32,None),
                TreeSelectOption::new("选项61", 61_u32,Some(6)),
                TreeSelectOption::new("选项62", 62_u32,Some(6)),
                TreeSelectOption::new("选项63", 63_u32,Some(6)),
            ]  valid_type=ValidType::Success/>
            // <MultiTreeSelect title="测试" values=value6 only_select_leaf=false options=vec![
            //     TreeSelectOption::new("选项1", 1_u32,None),
            //     TreeSelectOption::new("选项11", 11_u32,Some(1)),
            //     TreeSelectOption::new("选项12", 12_u32,Some(1)),
            //     TreeSelectOption::new("选项13", 13_u32,Some(1)),
            //     TreeSelectOption::new("选项2", 2_u32,None),
            //     TreeSelectOption::new("选项21", 21_u32,Some(2)),
            //     TreeSelectOption::new("选项22", 22_u32,Some(2)),
            //     TreeSelectOption::new("选项23", 23_u32,Some(2)),
            //     TreeSelectOption::new("选项3", 3_u32,None),
            //     TreeSelectOption::new("选项31", 31_u32,Some(3)),
            //     TreeSelectOption::new("选项32", 32_u32,Some(3)),
            //     TreeSelectOption::new("选项33", 33_u32,Some(3)),
            //     TreeSelectOption::new("选项4", 4_u32,None),
            //     TreeSelectOption::new("选项41", 41_u32,Some(4)),
            //     TreeSelectOption::new("选项42", 42_u32,Some(4)),
            //     TreeSelectOption::new("选项43", 43_u32,Some(4)),
            //     TreeSelectOption::new("选项5", 5_u32,None),
            //     TreeSelectOption::new("选项51", 51_u32,Some(5)),
            //     TreeSelectOption::new("选项52", 52_u32,Some(5)),
            //     TreeSelectOption::new("选项53", 53_u32,Some(5)),
            //     TreeSelectOption::new("选项6", 6_u32,None),
            //     TreeSelectOption::new("选项61", 61_u32,Some(6)),
            //     TreeSelectOption::new("选项62", 62_u32,Some(6)),
            //     TreeSelectOption::new("选项63", 63_u32,Some(6)),
            // ]  init_expand_mode=ExpandMode::All can_filter=true/>
        </div>
        // <div class="overflow-auto w-full h-96">
        //     <table class="table table-pin-rows table-pin-cols table-fixed border-collapse border border-slate-400">
        //         <thead>
        //         <tr>
        //             <th style="width:32px"></th>
        //             <td style="width:150px" class="border border-slate-300 ">Name</td>
        //             <td style="width:300px" class="border border-slate-300">Job</td>
        //             <td style="width:200px" class="border border-slate-300">company</td>
        //             <td style="width:200px" class="border border-slate-300">location</td>
        //             <td style="width:200px" class="border border-slate-300">Last Login</td>
        //             <td style="width:200px" class="border border-slate-300">Favorite Color</td>
        //             <th style="width:32px" class="border border-slate-300"></th>
        //         </tr>
        //         </thead>
        //         <tbody>
        //         <tr>
        //             <th class="border border-slate-300">1</th>
        //             <td class="border border-slate-300">Cy Ganderton</td>
        //             <td class="border border-slate-300">
        //                 <Select value=value4 options=vec![
        //                     SelectOption::new("选项1", 1_u32),
        //                     SelectOption::new("选项2", 2_u32),
        //                     SelectOption::new("选项3", 3_u32),
        //                 ]  valid_type=ValidType::Success border=false/>
        //             </td>
        //             <td class="border border-slate-300">
        //                 <div class="w-full tooltip" data-tip="Littel, Schaden and Vandervort Littel, Schaden and Vandervort Littel, Schaden and Vandervort">
        //                     <p class="text-nowrap text-ellipsis overflow-hidden">
        //                         Littel, Schaden and Vandervort Littel, Schaden and Vandervort Littel, Schaden and Vandervort
        //                     </p>
        //                 </div>
        //             </td>
        //             <td class="border border-slate-300 p-0"><input type="text" class="outline-0 border-0 w-full ml-1 mr-1 bg-inherit"/></td>
        //             <td class="border border-slate-300 p-0"><input type="text" class="outline-0 border-0 w-full ml-1 mr-1 bg-inherit"/></td>
        //             <td class="border border-slate-300 p-0"><input type="text" class="outline-0 border-0 w-full ml-1 mr-1 bg-inherit"/></td>
        //             <th class="border border-slate-300"><p class="text-right">1</p></th>
        //         </tr>
        //         <tr>
        //             <th>2</th> 
        //             <td>Hart Hagerty</td> 
        //             <td>Desktop Support Technician</td> 
        //             <td>Zemlak, Daniel and Leannon</td> 
        //             <td>United States</td> 
        //             <td>12/5/2020</td> 
        //             <td>Purple</td>
        //             <th>2</th> 
        //         </tr>
        //         <tr>
        //             <th>3</th> 
        //             <td>Brice Swyre</td> 
        //             <td>Tax Accountant</td> 
        //             <td>Carroll Group</td> 
        //             <td>China</td> 
        //             <td>8/15/2020</td> 
        //             <td>Red</td>
        //             <th>3</th> 
        //         </tr>
        //         <tr>
        //             <th>4</th> 
        //             <td>Marjy Ferencz</td> 
        //             <td>Office Assistant I</td> 
        //             <td>Rowe-Schoen</td> 
        //             <td>Russia</td> 
        //             <td>3/25/2021</td> 
        //             <td>Crimson</td>
        //             <th>4</th> 
        //         </tr>
        //         <tr>
        //             <th>5</th> 
        //             <td>Yancy Tear</td> 
        //             <td>Community Outreach Specialist</td> 
        //             <td>Wyman-Ledner</td> 
        //             <td>Brazil</td> 
        //             <td>5/22/2020</td> 
        //             <td>Indigo</td>
        //             <th>5</th> 
        //         </tr>
        //         <tr>
        //             <th>6</th> 
        //             <td>Irma Vasilik</td> 
        //             <td>Editor</td> 
        //             <td>Wiza, Bins and Emard</td> 
        //             <td>Venezuela</td> 
        //             <td>12/8/2020</td> 
        //             <td>Purple</td>
        //             <th>6</th> 
        //         </tr>
        //         <tr>
        //             <th>7</th> 
        //             <td>Meghann Durtnal</td> 
        //             <td>Staff Accountant IV</td> 
        //             <td>Schuster-Schimmel</td> 
        //             <td>Philippines</td> 
        //             <td>2/17/2021</td> 
        //             <td>Yellow</td>
        //             <th>7</th> 
        //         </tr>
        //         <tr>
        //             <th>8</th> 
        //             <td>Sammy Seston</td> 
        //             <td>Accountant I</td> 
        //             <td>OHara Welch and Keebler</td> 
        //             <td>Indonesia</td> 
        //             <td>5/23/2020</td> 
        //             <td>Crimson</td>
        //             <th>8</th> 
        //         </tr>
        //         <tr>
        //             <th>9</th> 
        //             <td>Lesya Tinham</td> 
        //             <td>Safety Technician IV</td> 
        //             <td>Turner-Kuhlman</td> 
        //             <td>Philippines</td> 
        //             <td>2/21/2021</td> 
        //             <td>Maroon</td>
        //             <th>9</th> 
        //         </tr>
        //         <tr>
        //             <th>10</th> 
        //             <td>Zaneta Tewkesbury</td> 
        //             <td>VP Marketing</td> 
        //             <td>Sauer LLC</td> 
        //             <td>Chad</td> 
        //             <td>6/23/2020</td> 
        //             <td>Green</td>
        //             <th>10</th> 
        //         </tr>
        //         <tr>
        //             <th>11</th> 
        //             <td>Andy Tipple</td> 
        //             <td>Librarian</td> 
        //             <td>Hilpert Group</td> 
        //             <td>Poland</td> 
        //             <td>7/9/2020</td> 
        //             <td>Indigo</td>
        //             <th>11</th> 
        //         </tr>
        //         <tr>
        //             <th>12</th> 
        //             <td>Sophi Biles</td> 
        //             <td>Recruiting Manager</td> 
        //             <td>Gutmann Inc</td> 
        //             <td>Indonesia</td> 
        //             <td>2/12/2021</td> 
        //             <td>Maroon</td>
        //             <th>12</th> 
        //         </tr>
        //         <tr>
        //             <th>13</th> 
        //             <td>Florida Garces</td> 
        //             <td>Web Developer IV</td> 
        //             <td>Gaylord, Pacocha and Baumbach</td> 
        //             <td>Poland</td> 
        //             <td>5/31/2020</td> 
        //             <td>Purple</td>
        //             <th>13</th> 
        //         </tr>
        //         <tr>
        //             <th>14</th> 
        //             <td>Maribeth Popping</td> 
        //             <td>Analyst Programmer</td> 
        //             <td>Deckow-Pouros</td> 
        //             <td>Portugal</td> 
        //             <td>4/27/2021</td> 
        //             <td>Aquamarine</td>
        //             <th>14</th> 
        //         </tr>
        //         <tr>
        //             <th>15</th> 
        //             <td>Moritz Dryburgh</td> 
        //             <td>Dental Hygienist</td> 
        //             <td>Schiller, Cole and Hackett</td> 
        //             <td>Sri Lanka</td> 
        //             <td>8/8/2020</td> 
        //             <td>Crimson</td>
        //             <th>15</th> 
        //         </tr>
        //         <tr>
        //             <th>16</th> 
        //             <td>Reid Semiras</td> 
        //             <td>Teacher</td> 
        //             <td>Sporer, Sipes and Rogahn</td> 
        //             <td>Poland</td> 
        //             <td>7/30/2020</td> 
        //             <td>Green</td>
        //             <th>16</th> 
        //         </tr>
        //         <tr>
        //             <th>17</th> 
        //             <td>Alec Lethby</td> 
        //             <td>Teacher</td> 
        //             <td>Reichel, Glover and Hamill</td> 
        //             <td>China</td> 
        //             <td>2/28/2021</td> 
        //             <td>Khaki</td>
        //             <th>17</th> 
        //         </tr>
        //         <tr>
        //             <th>18</th> 
        //             <td>Aland Wilber</td> 
        //             <td>Quality Control Specialist</td> 
        //             <td>Kshlerin, Rogahn and Swaniawski</td> 
        //             <td>Czech Republic</td> 
        //             <td>9/29/2020</td> 
        //             <td>Purple</td>
        //             <th>18</th> 
        //         </tr>
        //         <tr>
        //             <th>19</th> 
        //             <td>Teddie Duerden</td> 
        //             <td>Staff Accountant III</td> 
        //             <td>Pouros, Ullrich and Windler</td> 
        //             <td>France</td> 
        //             <td>10/27/2020</td> 
        //             <td>Aquamarine</td>
        //             <th>19</th> 
        //         </tr>
        //         <tr>
        //             <th>20</th> 
        //             <td>Lorelei Blackstone</td> 
        //             <td>Data Coordinator</td> 
        //             <td>Witting, Kutch and Greenfelder</td> 
        //             <td>Kazakhstan</td> 
        //             <td>6/3/2020</td> 
        //             <td>Red</td>
        //             <th>20</th> 
        //         </tr>
        //         </tbody> 
        //         <tfoot>
        //         <tr>
        //             <th></th> 
        //             <td>Name</td> 
        //             <td>Job</td> 
        //             <td>company</td> 
        //             <td>location</td> 
        //             <td>Last Login</td> 
        //             <td>Favorite Color</td>
        //             <th></th> 
        //         </tr>
        //         </tfoot>
        //     </table>
        // </div>
        // <Calendar/>
        <div class="hidden input-success textarea-success"/>
        // <Upload custom_request>
        //     <UploadDragger>"Click or drag a file to this area to upload"</UploadDragger>
        // </Upload>
        // <div class="flex items-center justify-center w-full">
        //     <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
        //         <div class="flex flex-col items-center justify-center pt-5 pb-6">
        //             <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
        //                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
        //             </svg>
        //             <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
        //             <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
        //         </div>
        //         <input id="dropzone-file" type="file" class="hidden" />
        //     </label>
        // </div>

    }
}
